// 容器样式 - 修复重叠问题
.container {
  min-height: 100vh;
  width: 100%;
  background: linear-gradient(135deg, #f0f9ff 0%, #e6f7ff 50%, #fff 100%);
  padding: 20rpx;
  box-sizing: border-box;
  display: flex;
  flex-direction: column; // 垂直布局
  gap: 0; // 移除间距，由各组件自己控制
  position: relative;
  
  &::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at 20% 80%, rgba(120, 119, 198, 0.1) 0%, transparent 50%),
                radial-gradient(circle at 80% 20%, rgba(255, 77, 79, 0.1) 0%, transparent 50%);
    pointer-events: none;
    z-index: -1;
  }
}

// 技能网格样式 - 优化布局
.skill-grid {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200rpx, 1fr));
  gap: 24rpx;
  margin-bottom: 32rpx;
  padding: 24rpx;
  background: rgba(255, 255, 255, 0.8);
  border-radius: 24rpx;
  backdrop-filter: blur(10rpx);
  box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.1);
  border: 1rpx solid rgba(255, 255, 255, 0.2);
  box-sizing: border-box;
}

// 技能卡片样式
.skill-card {
  background: linear-gradient(135deg, #fff 0%, #f8fafc 100%);
  border-radius: 20rpx;
  padding: 24rpx;
  text-align: center;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  border: 2rpx solid transparent;
  position: relative;
  overflow: hidden;
  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
  box-sizing: border-box;
  
  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4rpx;
    background: linear-gradient(90deg, #1890ff 0%, #40a9ff 50%, #69c0ff 100%);
    transform: scaleX(0);
    transition: transform 0.3s ease;
  }
  
  &:hover, &.active {
    transform: translateY(-8rpx);
    box-shadow: 0 12rpx 40rpx rgba(24, 144, 255, 0.2);
    border-color: #1890ff;
    
    &::before {
      transform: scaleX(1);
    }
    
    .skill-icon {
      transform: scale(1.1) rotate(5deg);
    }
  }
  
  .skill-icon {
    width: 80rpx;
    height: 80rpx;
    margin-bottom: 16rpx;
    transition: all 0.3s ease;
    border-radius: 12rpx;
  }
  
  .skill-name {
    font-size: 28rpx;
    font-weight: 600;
    color: #333;
    line-height: 1.4;
  }
  
  &.hover-effect {
    background: linear-gradient(135deg, #e6f7ff 0%, #bae7ff 100%);
  }
}
// 技巧选择区域样式
.skill-selector-section {
  width: 100%;
  margin-bottom: 32rpx;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 24rpx;
  padding: 32rpx 24rpx;
  backdrop-filter: blur(10rpx);
  box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.1);
  border: 1rpx solid rgba(255, 255, 255, 0.2);
  box-sizing: border-box;
}

.skill-cards-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20rpx;
  margin-top: 24rpx;
}

.skill-selector-card {
  background: linear-gradient(135deg, #fff 0%, #f8fafc 100%);
  border-radius: 20rpx;
  padding: 24rpx 16rpx;
  text-align: center;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  border: 2rpx solid transparent;
  position: relative;
  overflow: hidden;
  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
  box-sizing: border-box;
  cursor: pointer;
  
  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4rpx;
    background: linear-gradient(90deg, #1890ff 0%, #40a9ff 50%, #69c0ff 100%);
    transform: scaleX(0);
    transition: transform 0.3s ease;
  }
  
  &:hover, &.active {
    transform: translateY(-8rpx);
    box-shadow: 0 12rpx 40rpx rgba(24, 144, 255, 0.2);
    border-color: #1890ff;
    background: linear-gradient(135deg, #e6f7ff 0%, #bae7ff 100%);
    
    &::before {
      transform: scaleX(1);
    }
    
    .skill-icon {
      transform: scale(1.1);
    }
    
    .skill-name {
      color: #1890ff;
      font-weight: 700;
    }
  }
  
  .card-icon {
    margin-bottom: 12rpx;
    
    .skill-icon {
      width: 80rpx;
      height: 80rpx;
      object-fit: cover;
      transition: all 0.3s ease;
      border-radius: 12rpx;
      background-color: #f5f5f5;
    }
  }
  
  .card-content {
    .skill-name {
      display: block;
      font-size: 26rpx;
      font-weight: 600;
      color: #333;
      line-height: 1.4;
      margin-bottom: 8rpx;
      transition: all 0.3s ease;
    }
    
    .skill-desc {
      display: block;
      font-size: 20rpx;
      color: #666;
      line-height: 1.3;
      opacity: 0.8;
    }
  }
}
// 图片展示部分样式
.image-section {
  width: 100%;
  margin-bottom: 32rpx;
  background: linear-gradient(135deg, #f0f9ff 0%, #fff 100%);
  border-radius: 24rpx;
  overflow: hidden;
  box-shadow: 0 8rpx 32rpx rgba(24, 144, 255, 0.1);
  border: 1rpx solid #e6f7ff;
  box-sizing: border-box;
  
  .section-title {
    background: linear-gradient(135deg, #1890ff 0%, #40a9ff 100%);
    padding: 24rpx;
    margin: 0;
    
    .title-text {
      font-size: 32rpx;
      font-weight: 600;
      color: #fff;
      margin-bottom: 8rpx;
      display: block;
      text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.1);
    }
    
    .title-desc {
      font-size: 26rpx;
      color: rgba(255, 255, 255, 0.9);
      opacity: 0.95;
    }
  }
}

// 技术分析部分样式 - 优化间距
.analysis-section {
  width: 100%;
  margin-bottom: 32rpx;
  background: linear-gradient(135deg, #fffbf0 0%, #fff 100%);
  border-radius: 24rpx;
  overflow: hidden;
  box-shadow: 0 8rpx 32rpx rgba(250, 173, 20, 0.1);
  border: 1rpx solid #fffbf0;
  box-sizing: border-box;
  
  .section-title {
    background: linear-gradient(135deg, #faad14 0%, #ffc53d 100%);
    padding: 24rpx;
    margin: 0;
    
    .title-text {
      font-size: 32rpx;
      font-weight: 600;
      color: #fff;
      margin-bottom: 8rpx;
      display: block;
      text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.1);
    }
    
    .title-desc {
      font-size: 26rpx;
      color: rgba(255, 255, 255, 0.9);
      opacity: 0.95;
    }
  }
  
  .analysis-list {
    padding: 24rpx;
    
    .analysis-item {
      margin-bottom: 32rpx;
      background: #fff;
      border-radius: 20rpx;
      padding: 24rpx;
      box-shadow: 0 4rpx 16rpx rgba(250, 173, 20, 0.08);
      border-left: 6rpx solid #faad14;
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      position: relative;
      overflow: hidden;
      box-sizing: border-box;
      
      &::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 2rpx;
        background: linear-gradient(90deg, #faad14 0%, #ffc53d 50%, #ffd666 100%);
      }
      
      &:hover {
        transform: translateY(-4rpx);
        box-shadow: 0 8rpx 24rpx rgba(250, 173, 20, 0.15);
      }
      
      &:last-child {
        margin-bottom: 0;
      }
      
      .analysis-header {
        display: flex;
        align-items: center;
        gap: 16rpx;
        margin-bottom: 20rpx;
        
        .header-left {
          display: flex;
          align-items: center;
          gap: 16rpx;
          width: 100%;
          
          .step-number {
            width: 48rpx;
            height: 48rpx;
            background: linear-gradient(135deg, #faad14 0%, #ffc53d 100%);
            color: #fff;
            font-size: 26rpx;
            font-weight: 600;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 24rpx;
            box-shadow: 0 4rpx 12rpx rgba(250, 173, 20, 0.3);
            flex-shrink: 0;
          }
          
          .analysis-title {
            font-size: 30rpx;
            color: #faad14;
            font-weight: 600;
            line-height: 1.4;
            flex: 1;
          }
        }
      }
      
      .analysis-content {
        .analysis-details {
          .analysis-desc {
            font-size: 28rpx;
            color: #333;
            line-height: 2.2;
            margin-bottom: 20rpx;
            padding: 28rpx 24rpx;
            background: linear-gradient(135deg, #fffbf0 0%, #fff7e6 100%);
            border-radius: 0;
            border-left: 4rpx solid #faad14;
            border-right: 4rpx solid #faad14;
            box-sizing: border-box;
            letter-spacing: 0.5rpx;
            word-spacing: 2rpx;
            width: 100%;
            margin-left: 0;
            margin-right: 0;
            display: flex;
            align-items: center;
            min-height: 80rpx;
          }
          
          .key-points {
            margin-top: 20rpx;
            background: linear-gradient(135deg, #f6ffed 0%, #fffbf0 100%);
            padding: 24rpx;
            border-radius: 16rpx;
            border: 1rpx solid #d9f7be;
            box-sizing: border-box;
            
            .key-point {
              display: flex;
              align-items: flex-start;
              gap: 12rpx;
              margin-bottom: 16rpx;
              padding: 12rpx 16rpx;
              background: rgba(255, 255, 255, 0.8);
              border-radius: 12rpx;
              transition: all 0.2s ease;
              box-sizing: border-box;
              
              &:hover {
                background: rgba(255, 255, 255, 1);
                transform: translateX(8rpx);
              }
              
              &:last-child {
                margin-bottom: 0;
              }
              
              .point-bullet {
                color: #52c41a;
                font-size: 28rpx;
                font-weight: 600;
                margin-top: 2rpx;
                flex-shrink: 0;
              }
              
              .point-text {
                flex: 1;
                font-size: 26rpx;
                color: #555;
                line-height: 1.6;
                word-wrap: break-word;
              }
            }
          }
        }
      }
    }
  }
}

// 技术对比部分样式 - 优化间距
.comparison-section {
  width: 100%;
  margin-bottom: 32rpx;
  background: linear-gradient(135deg, #f9f0ff 0%, #fff 100%);
  border-radius: 24rpx;
  overflow: hidden;
  box-shadow: 0 8rpx 32rpx rgba(114, 46, 209, 0.1);
  border: 1rpx solid #f9f0ff;
  box-sizing: border-box;
  
  .section-title {
    background: linear-gradient(135deg, #722ed1 0%, #9254de 100%);
    padding: 24rpx;
    margin: 0;
    
    .title-text {
      font-size: 32rpx;
      font-weight: 600;
      color: #fff;
      margin-bottom: 8rpx;
      display: block;
      text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.1);
    }
    
    .title-desc {
      font-size: 26rpx;
      color: rgba(255, 255, 255, 0.9);
      opacity: 0.95;
    }
  }
  
  .comparison-list {
    padding: 24rpx;
    
    .comparison-item {
      margin-bottom: 32rpx;
      background: #fff;
      border-radius: 20rpx;
      padding: 24rpx;
      box-shadow: 0 4rpx 16rpx rgba(114, 46, 209, 0.08);
      border-left: 6rpx solid #722ed1;
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      position: relative;
      overflow: hidden;
      box-sizing: border-box;
      
      &::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 2rpx;
        background: linear-gradient(90deg, #722ed1 0%, #9254de 50%, #b37feb 100%);
      }
      
      &:hover {
        transform: translateY(-4rpx);
        box-shadow: 0 8rpx 24rpx rgba(114, 46, 209, 0.15);
      }
      
      &:last-child {
        margin-bottom: 0;
      }
      
      .comparison-header {
        display: flex;
        align-items: center;
        gap: 16rpx;
        margin-bottom: 20rpx;
        
        .comparison-number {
          width: 48rpx;
          height: 48rpx;
          background: linear-gradient(135deg, #722ed1 0%, #9254de 100%);
          color: #fff;
          font-size: 26rpx;
          font-weight: 600;
          display: flex;
          align-items: center;
          justify-content: center;
          border-radius: 24rpx;
          box-shadow: 0 4rpx 12rpx rgba(114, 46, 209, 0.3);
          flex-shrink: 0;
        }
        
        .comparison-title {
          font-size: 30rpx;
          color: #722ed1;
          font-weight: 600;
          line-height: 1.4;
          flex: 1;
        }
      }
      
      .comparison-content {
        .tip-content {
          .tip-text {
            font-size: 28rpx;
            color: #333;
            line-height: 2.2;
            margin-bottom: 20rpx;
            padding: 28rpx 24rpx;
            background: linear-gradient(135deg, #f9f0ff 0%, #efdbff 100%);
            border-radius: 0;
            border-left: 4rpx solid #722ed1;
            border-right: 4rpx solid #722ed1;
            box-sizing: border-box;
            letter-spacing: 0.5rpx;
            word-spacing: 2rpx;
            width: 100%;
            margin-left: 0;
            margin-right: 0;
            display: flex;
            align-items: center;
            min-height: 80rpx;
          }
          
          .examples-list {
            margin-top: 20rpx;
            background: linear-gradient(135deg, #f6ffed 0%, #f0f9ff 100%);
            padding: 24rpx;
            border-radius: 16rpx;
            border: 1rpx solid #d9f7be;
            box-sizing: border-box;
            
            .example-item {
              display: flex;
              align-items: flex-start;
              gap: 12rpx;
              margin-bottom: 16rpx;
              padding: 12rpx 16rpx;
              background: rgba(255, 255, 255, 0.8);
              border-radius: 12rpx;
              transition: all 0.2s ease;
              box-sizing: border-box;
              
              &:hover {
                background: rgba(255, 255, 255, 1);
                transform: translateX(8rpx);
              }
              
              &:last-child {
                margin-bottom: 0;
              }
              
              .example-bullet {
                color: #52c41a;
                font-size: 28rpx;
                font-weight: 600;
                margin-top: 2rpx;
                flex-shrink: 0;
              }
              
              .example-text {
                flex: 1;
                font-size: 26rpx;
                color: #555;
                line-height: 1.6;
                word-wrap: break-word;
              }
            }
          }
        }
      }
    }
  }
}

// 常见问题部分样式 - 优化间距
.errors-section {
  width: 100%;
  margin-bottom: 32rpx;
  background: linear-gradient(135deg, #fff5f5 0%, #fff 100%);
  border-radius: 24rpx;
  overflow: hidden;
  box-shadow: 0 8rpx 32rpx rgba(255, 77, 79, 0.1);
  border: 1rpx solid #ffe7e7;
  box-sizing: border-box;

  .section-title {
    background: linear-gradient(135deg, #ff4d4f 0%, #ff7875 100%);
    padding: 24rpx;
    margin: 0;
    
    .title-text {
      font-size: 32rpx;
      font-weight: 600;
      color: #fff;
      margin-bottom: 8rpx;
      display: block;
      text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.1);
    }

    .title-desc {
      font-size: 26rpx;
      color: rgba(255, 255, 255, 0.9);
      opacity: 0.95;
    }
  }

  .errors-list {
    padding: 24rpx;

    .error-item {
      margin-bottom: 32rpx;
      background: #fff;
      border-radius: 20rpx;
      padding: 24rpx;
      box-shadow: 0 4rpx 16rpx rgba(255, 77, 79, 0.08);
      border-left: 6rpx solid #ff4d4f;
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      position: relative;
      overflow: hidden;
      box-sizing: border-box;

      &::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 2rpx;
        background: linear-gradient(90deg, #ff4d4f 0%, #ff7875 50%, #ffa39e 100%);
      }

      &:hover {
        transform: translateY(-4rpx);
        box-shadow: 0 8rpx 24rpx rgba(255, 77, 79, 0.15);
      }

      &:last-child {
        margin-bottom: 0;
      }

      .error-header {
        margin-bottom: 20rpx;
        display: flex;
        align-items: center;
        gap: 16rpx;
        position: relative;

        .error-number {
          width: 48rpx;
          height: 48rpx;
          background: linear-gradient(135deg, #ff4d4f 0%, #ff7875 100%);
          color: #fff;
          font-size: 26rpx;
          font-weight: 600;
          display: flex;
          align-items: center;
          justify-content: center;
          border-radius: 24rpx;
          box-shadow: 0 4rpx 12rpx rgba(255, 77, 79, 0.3);
          position: relative;
          flex-shrink: 0;

          &::after {
            content: '';
            position: absolute;
            top: -2rpx;
            left: -2rpx;
            right: -2rpx;
            bottom: -2rpx;
            background: linear-gradient(135deg, #ff4d4f, #ff7875, #ffa39e);
            border-radius: 26rpx;
            z-index: -1;
            opacity: 0.3;
          }
        }

        .error-title {
          flex: 1;
          font-size: 30rpx;
          color: #ff4d4f;
          font-weight: 600;
          line-height: 1.4;
          text-shadow: 0 1rpx 2rpx rgba(255, 77, 79, 0.1);
          word-wrap: break-word;
        }

        &::after {
          content: '⚠️';
          font-size: 24rpx;
          opacity: 0.6;
          flex-shrink: 0;
        }
      }

      .error-content {
        .correction-text {
          font-size: 28rpx;
          color: #333;
          line-height: 1.7;
          margin-bottom: 20rpx;
          padding: 20rpx;
          background: linear-gradient(135deg, #f0f9ff 0%, #e6f7ff 100%);
          border-radius: 16rpx;
          border-left: 4rpx solid #1890ff;
          position: relative;
          box-sizing: border-box;
          word-wrap: break-word;

          &::before {
            content: '💡';
            position: absolute;
            top: 20rpx;
            right: 20rpx;
            font-size: 20rpx;
            opacity: 0.7;
          }
        }

        .tips-list {
          margin-top: 20rpx;
          background: linear-gradient(135deg, #f6ffed 0%, #f0f9ff 100%);
          padding: 24rpx;
          border-radius: 16rpx;
          border: 1rpx solid #d9f7be;
          position: relative;
          box-sizing: border-box;

          &::before {
            content: '实用技巧';
            position: absolute;
            top: -12rpx;
            left: 20rpx;
            background: linear-gradient(135deg, #52c41a 0%, #73d13d 100%);
            color: #fff;
            font-size: 22rpx;
            padding: 6rpx 16rpx;
            border-radius: 12rpx;
            font-weight: 500;
            box-shadow: 0 2rpx 8rpx rgba(82, 196, 26, 0.3);
          }

          .tip-item {
            display: flex;
            align-items: flex-start;
            gap: 12rpx;
            margin-bottom: 16rpx;
            padding: 12rpx 16rpx;
            background: rgba(255, 255, 255, 0.8);
            border-radius: 12rpx;
            transition: all 0.2s ease;
            box-sizing: border-box;

            &:hover {
              background: rgba(255, 255, 255, 1);
              transform: translateX(8rpx);
            }

            &:last-child {
              margin-bottom: 0;
            }

            .tip-bullet {
              color: #52c41a;
              font-size: 28rpx;
              font-weight: 600;
              margin-top: 2rpx;
              flex-shrink: 0;
            }

            .tip-text {
              flex: 1;
              font-size: 26rpx;
              color: #555;
              line-height: 1.6;
              font-weight: 400;
              word-wrap: break-word;
            }
          }
        }
      }
    }
  }
}

// 问题反馈部分样式 - 优化间距
.feedback-section {
  width: 100%;
  margin-bottom: 32rpx;
  background: linear-gradient(135deg, #f0f9ff 0%, #fff 100%);
  border-radius: 24rpx;
  overflow: hidden;
  box-shadow: 0 8rpx 32rpx rgba(24, 144, 255, 0.1);
  border: 1rpx solid #e6f7ff;
  box-sizing: border-box;
  
  .section-title {
    background: linear-gradient(135deg, #1890ff 0%, #40a9ff 100%);
    padding: 24rpx;
    margin: 0;
    
    .title-text {
      font-size: 32rpx;
      font-weight: 600;
      color: #fff;
      margin-bottom: 8rpx;
      display: block;
      text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.1);
    }
    
    .title-desc {
      font-size: 26rpx;
      color: rgba(255, 255, 255, 0.9);
      opacity: 0.95;
    }
  }
  
  .feedback-content {
    padding: 24rpx;
    
    .input-group {
      position: relative;
      margin-bottom: 24rpx;
      
      .feedback-input {
        width: 100%;
        min-height: 200rpx;
        padding: 20rpx;
        border: 2rpx solid #e6f7ff;
        border-radius: 16rpx;
        font-size: 28rpx;
        color: #333;
        background: #fff;
        transition: all 0.3s ease;
        box-sizing: border-box;
        
        &:focus {
          border-color: #1890ff;
          box-shadow: 0 0 0 4rpx rgba(24, 144, 255, 0.1);
          outline: none;
        }
        
        &::placeholder {
          color: #bfbfbf;
        }
      }
      
      .word-count {
        position: absolute;
        bottom: 12rpx;
        right: 16rpx;
        font-size: 24rpx;
        color: #999;
        background: rgba(255, 255, 255, 0.9);
        padding: 4rpx 8rpx;
        border-radius: 8rpx;
      }
    }
    
    .submit-btn {
      width: 100%;
      height: 88rpx;
      background: linear-gradient(135deg, #1890ff 0%, #40a9ff 100%);
      color: #fff;
      border: none;
      border-radius: 16rpx;
      font-size: 30rpx;
      font-weight: 600;
      transition: all 0.3s ease;
      box-shadow: 0 4rpx 16rpx rgba(24, 144, 255, 0.3);
      
      &:active {
        transform: translateY(2rpx);
        box-shadow: 0 2rpx 8rpx rgba(24, 144, 255, 0.4);
      }
      
      &.submitting {
        background: linear-gradient(135deg, #bfbfbf 0%, #d9d9d9 100%);
        box-shadow: none;
        transform: none;
      }
    }
  }
}



// 动画效果
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20rpx);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(40rpx);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate__animated {
  animation-duration: 0.6s;
  animation-fill-mode: both;
}

.animate__fadeIn {
  animation-name: fadeIn;
}

.animate__fadeInUp {
  animation-name: fadeInUp;
}